<template>
	<div>
		<div class="chart-box">
			<img @click="toLeft" src="../../image/left.png" alt="" class="chart-left" />
			<div class="chart-main" ref="xyjcRef"></div>
			<img @click="toRight" src="../../image/right.png" alt="" class="chart-arrow" />
		</div>
	</div>
</template>
    
    <script setup lang='ts'>
import { getDataCq8 } from '/@/api/largeScreen/baseView';
import { ref, reactive } from 'vue';
import * as echarts from 'echarts';
const props = defineProps({
	rightCode: {
		type: Array,
		default: [],
	},
});
const xyjcRef = ref();

const myChart = ref();

const xAxisData = ref();
const yData = ref();
const date = ref(new Date());

const getDateTime = (time: Date) => {
	const year = time.getFullYear();
	let month: string | number = time.getMonth() + 1;
	month = month >= 10 ? month : `0${month}`;
	let day: string | number = time.getDate();
	day = day >= 10 ? day : `0${day}`;
	return `${year}-${month}-${day}`;
};

const toLeft = () => {
	date.value = new Date(date.value.getTime() - 1000 * 60 * 60 * 24 * 7);
	getChartData();
};

const toRight = () => {
	date.value = new Date(date.value.getTime() + 1000 * 60 * 60 * 24 * 7);
	getChartData();
};

const updateOption = () => {
	const option = {
		tooltip: {
			trigger: 'axis',
		},
		legend: {
			data: ['亚洲玉米螟(只)'],
			textStyle: {
				color: '#FFffff', // 设置图例文字为红色
			},
		},
		grid: {
			// 错误的做法：会限制图表高度
			// height: '50%'

			// 正确的做法：只设置边距
			top: 40,
			bottom: 40,
			left: 30,
			right: 30,
		},

		xAxis: {
			type: 'category',
			data: xAxisData.value,
			axisLabel: {
				color: '#C9FFFF',
				rotate: 45,
				align: 'center', // 文字对齐方式
				margin: 15,
				fontSize: 12,
			},
			axisLine: {
				show: true, // 显示轴线
				lineStyle: {
					type: 'dashed', // 设置为虚线
					color: '#ccc', // 虚线颜色
					width: 1, // 虚线宽度
				},
			},
			axisTick: {
				show: false,
			},
			splitLine: {
				show: false,
			},
		},
		yAxis: {
			type: 'value',
			axisLabel: {
				color: '#C9FFFF',
			},
			axisLine: {
				show: false, // 显示轴线
				lineStyle: {
					color: '#005958', // 设置轴线颜色
					width: 1, // 设置轴线宽度
				},
			},
			axisTick: {
				show: false, // 显示刻度线
			},

			splitLine: {
				show: true, // 不显示网格线（如果需要）
				lineStyle: {
					type: 'dashed', // 设置为虚线
					color: '#ccc', // 虚线颜色
					width: 1, // 虚线宽度
				},
			},
		},
		series: [
			{
				name: '亚洲玉米螟(只)',
				type: 'bar',
				smooth: true, // 设置为曲线
				data: yData.value,
				itemStyle: {
					color: '#17F9AD',
				},
				barWidth: 6,
			},
		],
	};
	myChart.value.setOption(option);
};

const getChartData = () => {
	const params = {
		deviceCode: props.rightCode[1],
		dateNum: 7,
		endDate: getDateTime(date.value),
	};

	getDataCq8(params).then((res) => {
		let data = res.data;
		yData.value = [];
		xAxisData.value = [];
		data.map((item: any) => {
			xAxisData.value.push(item.key);
			yData.value.push(item.value);
		});
		updateOption();
	});
};

onMounted(() => {
	myChart.value = markRaw(echarts.init(xyjcRef.value));
	getChartData();
});
</script>
    <style lang='less' scoped>
.tabs {
	display: flex;
	padding: 0 9px;
	margin: 0 auto;
	margin-bottom: 8px;
	justify-content: center;
	width: 280px;

	.tab {
		min-width: 33.3%;
		max-width: 33.3%;
		background-size: 100% 100%;
		font-family: Alimama ShuHeiTi;
		font-weight: bold;
		font-size: 14px;
		height: 39px;
		color: #fff;
		&.active {
			background: url('../../image/bg_tab.png') no-repeat;
			background-size: 100% 100%;
		}
	}
}

.chart-box {
	display: flex;
	align-items: center;
	.chart-main {
		width: 300px;
		height: 200px;
	}
	.chart-left {
		margin-right: 30px;
		cursor: pointer;
		margin-left: 12px;
	}

	.chart-arrow {
		cursor: pointer;
	}
}
</style>